import { PROJECT_PREFIX } from '../../types/constants'

export function styles(className: string) {
  return `
  .${className} {
    all: initial !important;
    position: relative !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px  !important;
    font-size: 12px !important;
    color: #b0b0b0 !important;
    
    .sort-selector {
      position: relative;
      cursor: pointer;
      
      .current-type {
        padding: 4px 8px;
        border-radius: 4px;
        
        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }
      }
      
      .options-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        background: var(--${PROJECT_PREFIX}-theme-toolbar-filter-bg);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        min-width: 120px;
        display: none;
        
        &.open {
          display: block;
        }
        
        .option {
          padding: 8px 12px;
          
          &:hover {
            background: var(--${PROJECT_PREFIX}-theme-dropdown-bg-hover);
          }
          
          &.active {
            color: var(--${PROJECT_PREFIX}-theme-primary);
          }
        }
      }
    }
    
    .sort-order {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1;
      
      .sort-arrow {
        cursor: pointer;
        padding: 0;
        border-radius: 2px;
        height: 8px;
        
        &.active svg {
          fill: #90caf9 !important;
        }
      }
    }
  }
`
}
